import logo from '../../assets/logo.png'
import './index.scss'

import { Form, Input, Button, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { login } from '@/store/actions/user';

const Login = () => {
    const dispatch = useDispatch()
    const history = useHistory()
    // 表单提交事件
    const onFinish = async values => {
        const { mobile,code } = values
        const res = await dispatch(login(mobile,code))
        if(res.token) {
            history.push('/home')
        }
    }
    return (
        <div className="login">
            <div className="login-container">
                <img className="login-logo" src={logo} alt="" />
                {/* 登录表单 */}
                <Form
                    size="large"
                    validateTrigger={["onChange", "onBlur"]}
                    onFinish={onFinish}
                    initialValues={{
                        mobile: '13911111111',
                        code: '246810',
                        isAgree: true
                    }}
                    autoComplete="off">
                    <Form.Item
                        name="mobile"
                        rules={[
                            { required: true, message: "请输入手机号" },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: "手机格式不正确",
                            },
                        ]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="请输入手机号" />
                    </Form.Item>
                    <Form.Item
                        name="code"
                        rules={[
                            { required: true, message: "请输入验证码" },
                            { len: 6, message: "验证码6个字符串" },
                        ]}
                    >
                        <Input prefix={<LockOutlined />} placeholder="请输入验证码" />
                    </Form.Item>
                    <Form.Item
                        name="isAgree"
                        valuePropName="checked"
                        rules={[
                            {
                                validator: (_, value) => {
                                    if (value) return Promise.resolve();
                                    else return Promise.reject(new Error("请勾选我已阅读并同意"));
                                },
                            },
                        ]}
                    >
                        <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" block>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Login